<template>
  <a-modal :open="openAppend" title="新增数据" :footer="null" :closable="false">
    <a-form
        :model="formAppend"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        autocomplete="off"
        @finish="onAppend"
        @finishFailed="onFinishFailed"
        :validate-messages="validateMessages"
    >
      <a-row>
        <a-col :span="12" v-for="(item,index) in slotAppend" :class="item.slot==='id'?'hidden':''">
          <a-form-item :label="item.name" :name="item.slot" :rules="item.rules">
            <a-input v-if="item.slot!=='icon'&&item.slot!=='state'" :disabled="item.slot==='id'"
                     v-model:value="formAppend[item.slot]"/>
            <a-select
                v-else-if="item.slot==='icon'"
                ref="select"
                v-model:value="formAppend[item.slot]"
                @change="handleChange(formAppend[item.slot])"
            >

              <a-select-option v-for="item in iconList" :value="item.icon">
                <Icon :icon="item.icon"></Icon>
              </a-select-option>
            </a-select>
            <a-select
                v-else-if="item.slot==='state'"
                ref="select"
                v-model:value="formAppend[item.slot]"
                @change="handleChange(formAppend[item.slot])"
            >
              <a-select-option value="0">禁用</a-select-option>
              <a-select-option value="1">正常</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item :wrapper-col="{ offset: 17, span: 7 }">
        <a-row justify="space-between" align="middle">
          <a-button @click="onCancel">取消</a-button>
          <a-button type="primary" html-type="submit">确定</a-button>
        </a-row>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import {defineProps} from "vue";
import {Icon, iconList} from "@/config/Icon";

const handleChange = (slot, value: string) => {
  slot = value;
};

interface Props {
  onCancel?: Function;
  openAppend?: Boolean;
  onAppend?: Function;
  formAppend?: Object;
  slotAppend?: Array<any>;
  onFinishFailed?: Function;
  validateMessages?: Object;
}

defineProps<Props>();
</script>

<style scoped>
.hidden {
  display: none;
}
</style>

